<template>
  <view class="container">
    <view class="titile">
      <image src="/static/logo.jpeg" style="width: 200rpx;height: 200rpx"></image>
      <text>陇上牧园</text>
    </view>

    <view class="form">
      <view class="login">
        <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" :class="loginBtnStyle">授权手机号登录</button>
      </view>
    </view>
    <view class="login-footer">
      <view class="check" style="display: flex;align-items: center;justify-content: center">
        <div style="display: flex;align-items: center" @click="setAgree()">
          <image v-if="agree" class="publish-icon" src="/static/radio_fill.png"></image>
          <image v-else class="publish-icon" src="/static/radio.png"></image>
          <text style="color: #333">请阅读并同意</text>
        </div>
        <text style="color: #40AE36"  @click="setAgree2()">《{{ '登录协议'}}》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      tips: '获取验证码',
      tipsStatus: 0, //0=可以获取,1=正在倒计时,2=重复获取
      tipsStyle: 'tipsStyle',
      seconds: 60,
      phone: '',
      code: '',
      loginBtnStyle: 'loginBtnStyle open',
      policy: {
        id: 1,
        name: '登录协议'
      },
      agree: false
    };
  },
  onLoad() {

  },
  watch: {
    // 如果表单正常输入则可以点击登录
    phone(newVal, oldVal) {
      if (this.$utils.checkPhone(newVal) && this.code.length >= 4) {
        this.loginBtnStyle = 'loginBtnStyle open'
      }else{
        this.loginBtnStyle = 'loginBtnStyle close'
      }
    },
    code(newVal, oldVal) {
      if (newVal.length >= 4 && this.$utils.checkPhone(this.phone)) {
        this.loginBtnStyle = 'loginBtnStyle open'
      }else{
        this.loginBtnStyle = 'loginBtnStyle close'
      }
    }
  },
  methods: {
    onGetPhoneNumber(e) {
      if (!this.agree) {
        uni.showToast({
          title: '请阅读并同意《登录协议》',
          icon: 'none'
        })
        return
      }
      if(e.detail.errMsg === 'getPhoneNumber:ok') {
        uni.showLoading({
          title: '登录中...'
        })
        let that = this
        const { detail: { encryptedData, iv, code } } = e;
        wx.login({
          async success(loginRes) {
            if (loginRes.code) {
              try {
                // 发送code、encryptedData、iv到后端
                const response = await that.$api.wxLogin({
                  code: loginRes.code,
                  encryptedData,
                  iv,
                });
                uni.showToast({
                  title: '登录成功',
                  icon: 'success'
                })
                that.$store.commit('SET_USERINFO', response)
                uni.reLaunch({
                  url: '/pages/index/index'
                })
              } catch (error) {
                uni.showToast({
                  title: error,
                  icon: 'none'
                })
                console.error('请求后端接口失败:', error);
              }
            }
          }
        })
      }
    },
    setAgree() {
      this.agree = !this.agree;
    },
    setAgree2() {
      uni.navigateTo({
        url: '/pages/policy/policy?id=' + this.policy.id
      })
    },
  },
  onUnload() {
    // clearTime
    this.clearTimer();
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 56rpx;
}

.titile {
  margin-top: 100rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  text {
    font-size: 36rpx;
    font-weight: bold;
    color: #262424;
  }
}

.form {
  margin-top: 100rpx;
}

.form-item {
  margin: 30rpx 0rpx;
  border-bottom: 1rpx solid #F0F0F0;

  input {
    padding: 16rpx 0rpx;
  }
  .input-placeholder {
    font-size: 30rpx;
    color: #CCC8C8;
  }
}

.form-item.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tipsStyle {
  font-size: 24rpx;
  color: #E9B921;
}

.tipsStyle1 {
  font-size: 24rpx;
  color: #CCC8C8;
}

.tipsStyle2 {
  font-size: 24rpx;
  color: #40AE36;
}

.login {
  margin-top: 50rpx;

  .loginBtnStyle {
    display: inline-block;
    width: 100%;
    color: #FFFFFF;
    font-size: 30rpx;
    border-radius: 45rpx;
    opacity: 1;
    line-height: 90rpx;
  }

  .loginBtnStyle.open {
    background: #40AE36;
  }

  .loginBtnStyle.close {
    background: #8CCE86;
  }
}

.register {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666262;
  margin-top: 40rpx;

  image {
    width: 10rpx;
    height: 22rpx;
    margin-left: 8rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;

  text {
    font-size: 26rpx;
    color: #999393;
  }
}

.other {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;

  .wx {
    margin-right: 75rpx;
  }

  .qq {
    margin-left: 75rpx;
  }

  image {
    width: 100rpx;
    height: 100rpx;
  }
}

.login-footer {
  padding-bottom: 100rpx;
  width: 100%;
  font-size: 28rpx;
  color: #999;
  display: flex;
  justify-content: center;
  margin-top: 30rpx;

  .publish-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}

</style>
